<template>
  <!--问题台账-->
  <div class="listTemplate">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" @click="clear_S">
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>
      问题台账
      <mu-button icon slot="right" @click="searchcontroll = true">
        <i class="iconfont iconshaixuan4"></i>
      </mu-button>
    </mu-appbar>
    <!-- 顶部 Tab 切换开始 -->
    <div class="t-header">
      <mTabs v-model="active1" :tabList="tabList1" @change="handleTopTabChange()" position="center"></mTabs>
      <mTabs v-model="active" :tabList="tabList" @change="handleTopTabChange()"></mTabs>
    </div>
    <!-- 顶部 Tab 切换结束-->
    <section class="t-body">

      <!--<mu-container ref="container" class="demo-loadmore-content" style="padding:5px;background-color:#fff;">-->

      <!-- 平面图开始 -->
      <div class="lan-loadmore-content lan-steper" v-if="active === 1">
        <mTree
          v-show="tree.data.length"
          :data="tree.data"
          :showTotal="true"
          :getName="'count'"
          :props="tree.defaultProps"
          :clickableConditions="tree.clickableConditions"
          @click="skipPage"
        ></mTree>
        <NoData v-if="!tree.data.length"/>
      </div>

      <questionareaList @getData = 'getData' ref="lists" v-bind:datas = 'datas' v-show="active === 2" ></questionareaList>

      <!--v-bind:data=""-->
      <!-- 平面图结束 -->
      <Org ref="org" v-model="org" orgType="currOrgProject" @change="orgChange"
           :open="orgDialog" @open="openOrgDialog" @close="closeOrgDialog" @confirm="orgConfirm"
      ></Org>
    </section>
    <!-- 筛选 -->
    <mu-dialog width="100%" transition="slide-right" fullscreen :open.sync="searchcontroll" class="lan-dialog">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="25%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>


          <mu-form-item label="结束时间">
            <mu-date-input v-model="form.endTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" container="bottomSheet" label-float></mu-date-input>
            <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>
          <!--<mu-form-item  label="检查人">
            <mu-text-field v-model="form.partItemName" placeholder="请输入"></mu-text-field>
            <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>-->
          <mu-form-item label="检查人" class="form-between" >
            <span class="normal-font-size form-right-text" @click="openUser" >{{checkUser?checkUser:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>

    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="opens">
      <mu-appbar color="primary" class="lan-header" >
        <mu-button icon slot="left" @click="closeFullscreenDialog">
          <i class="iconfont angle-left iconangle-left" ></i>
        </mu-button>
        {{this.name}}
      </mu-appbar>
      <questionareaList @getData = 'getData' v-bind:datas = 'datas'></questionareaList>
    </mu-dialog>
    <!-- 人员 -->
    <User ref="User" v-if="userOpen" :multiple="false" :open="userOpen" :orgType="'currOrgProject'" :dataScope="dataScope" @change="userChange" @close="userOpen = false"></User>
  </div>
</template>

<script>
  import mTree from "@/tree/mTree";
  import Org from "@/select/org/Org.vue"
  import mTabs from "./../../../../components/tabs/mTabs";
  import questionareaList from "./questionareaList";
  import User from "@/select/user/User";
  export default {
    name: 'mainPage',
    components:{
      mTabs,
      mTree,
      Org,
      questionareaList,
      User
    },
    data () {
      return {
        contactType:'1,2,3',
        dataScope:"project-contact",
        userOpen:false,
        checkUser:'',
        id:'',
        data:[],
        searchcontroll: false,//筛选
        name:'',
        opens:false,
        active: 1,
        active1:0,
        tabList: [{id: 1, name: '平面图'}, {id: 2, name: '列表'}],
        tabList1: [{id: 0, name: '未完成',}, {id: 1, name: '已完成'}],
        tree: {
          defaultProps: {
            id: "id",
            name: "name",
            children: "children"
          },
          clickableConditions: {
            all: {
              //所有的是否可以点击
              enable: true
            },
            part: {
              //部分的可以点击的条件
              prop: "orgType",
              value: [1]
            }
          },
          data: []
        },
        // 组织弹窗状态
        orgDialog: false,
        obj:{},//切换层级
        // 组织
        org: [],
        datas:[],
        currentOrg: {},
        num: 20,
        refreshing: false,
        loading: false,
        text: 'List',
        activeTab: 0,
        open: false,
        activelist: 0,
        vactiveStep: 0,
        pageSize: 10,
        pageNo: 0,
        form: {
          startTime: '',
          endTime: '',
          partItemName: '',//检查人
          projectName:'',
        },
        totalPage:1
      }
    },
    mounted () {
      if (sessionStorage.getItem('tabs') == undefined) {
        this.active = 1;
        this.orgDialog = true;
      }else {
        this.active = Number(sessionStorage.getItem('tabs'));
        this.orgDialog = false;
      }
    },
    created () {
      let orgInfo = this.$A.GS("orgInfo");
      this.currentOrg.type = orgInfo.type;
      this.currentOrg.value = orgInfo.orgId;
      this.currentOrg.label = orgInfo.label;
      // if (this.currentOrg.type == '1') {
        this.loadTreeData();
        this.getData();
      // } else {
        this.orgDialog = true
      // }
      // console.log(this.$A.GUP())
    },
    methods: {
      userChange(value){
        console.log(value);
        this.checkUser = value[0]['employeeName'];
        this.form.partItemName = value[0]['id'];
        this.userOpen =false
      },
      openUser () {
        this.userOpen =true
      },
      clear_S () {
        sessionStorage.removeItem('tabs');
        this.orgDialog = true;
      },
      //查询
      search () {
        this.pageNo = 0;
        this.datas=[];
        this.getData();
        this.loadTreeData();
        this.searchcontroll = false;
      },
      //清空
      clearSearch () {
        this.form = {
          startTime: '',
          endTime: '',
          partItemName: '',//检查人
          projectName:''
        }
        this.checkUser = ''
      },
      //列表数据
      getData (val,id) {
        console.log(this.pageNo);
        console.log(this.totalPage);
        // this.$openLoading();
        if (this.pageNo > this.totalPage) {
          // this.$closeLoading();
          return false
        };
        this.pageNo += 1;
        let params = {
          orgId: this.obj["orgId"],
          type: this.obj["type"],
          current:this.pageNo,	//是	int		当前页
          size:this.pageSize,	//是	int		当前页大小
          alarmType:this.active1,	//否	int		0未完成 1已完成
          areaId:this.id,
          startTime:this.form.startTime,	//是	String		开始时间
          endTime:this.form.endTime,	//是	String		结束时间
          userId:this.form.partItemName,//	是	String		检查人
        };
        this.$A.Go("get", '/safety/checkProblem/pageList', params).then(response => {
          this.$closeLoading();
          if (response.code == 200) {
            console.log(response.body.rows);
            let data = response.body.rows;

            this.datas = this.datas.concat(data);

            let total = response.body.page.rows|| '0';
            this.totalPage = Math.ceil(total /this.pageSize);
            // console.log(this.datas);
          }
        })
      },
      //table 切换
      handleTopTabChange () {
        sessionStorage.setItem("tabs",this.active);
        this.id = '';
        this.datas = [];
        this.pageNo = 0;
        // this.getData(this.active1)
        // console.log(this.active);
        if (this.active === 1) {
          this.loadTreeData(this.active1)
        } else{
          // console.log(this.active1);
          this.getData(this.active1)
          // this.$refs.lists.getData(this.active1);
        }
        // if  (this.active1 === 0) {
        //   this.loadTreeData()
        // } else if (this.active1 === 1) {
        //   this.getData(this.active1)
        // }
      },
      //区域平面图
      loadTreeData () {
        this.$openLoading();
        let params = {
          orgId: this.obj["orgId"],
          type: this.obj["type"],
          taskAndProblemAlarmType: this.active1,//0未完成 1已完成
          startTime:this.form.startTime,	//是	String		开始时间
          endTime:this.form.endTime,	//是	String		结束时间
          userId:this.form.partItemName,//	是	String		检查人
        };
        this.$A.Go("get", '/safety/projectArea/problemRec/count', params).then(
          response => {
            this.$closeLoading();
            if (response.code == 200) {
              this.tree.data =
                response.body.treeNodeList && response.body.treeNodeList.length ? response.body.treeNodeList : [];
              this.dataPool = response.body;
              this.tabList1[0].name = `未完成${this.dataPool.unFinishProblemCount}`;
              this.tabList1[1].name = `已完成${this.dataPool.finishProblemCount}`;
            }else {
              this.tree.data = [];
            }
          })
      },
      //点击平面图 回调
      skipPage (treeRowData) {
        console.log(treeRowData);
        this.datas = [];
        this.pageNo = 0;
        let obj = treeRowData;
        this.id = obj.id;
        this.getData(this.active1);
        this.name = obj.name;
        this.opens = true;
      },
      closeFullscreenDialog () {
        this.opens = false;
      },
      // 组织选择结果确认
      orgConfirm () {
        console.log(this.org[0]);
        this.orgDialog = false;
      },
      // 打开组织选择弹窗
      openOrgDialog () {
        this.orgDialog = true;
      },
      // 关闭组织选择弹窗
      closeOrgDialog () {
        this.orgDialog = false;
        this.$router.back()
      },
      // 组织选择
      orgChange(ev) {
        let orgInfo = {
          orgId: ev[0].value,
          orgName: ev[0].label,
          type: ev[0].type
        };
        this.obj = orgInfo;
        this.loadTreeData();
        this.getData();
      },

      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.text = this.text === 'List' ? 'Menu' : 'List';
          this.num = 20;
        }, 2000)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .listTemplate {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .t-header{
      padding-top:0.1rem;
    }
    .t-body {
      flex: 1;
      overflow: auto;
      padding: 0.1rem 0;
      .lan-loadmore-content{
        height: 100%;
      }
    }
  }
</style>
